"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import { ChevronDown } from "lucide-react"

export interface SelectOption {
  value: string
  label: string
}

export interface SelectProps {
  options: SelectOption[]
  value: string
  onChange: (value: string) => void
  className?: string
}

export function Select({ options, value, onChange, className = "" }: SelectProps) {
  const [isOpen, setIsOpen] = useState(false)
  const selectRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [])

  return (
    <div ref={selectRef} className={`relative ${className}`}>
      <SelectTrigger onClick={() => setIsOpen(!isOpen)}>
        <SelectValue>{options.find((option) => option.value === value)?.label || "Select..."}</SelectValue>
        <ChevronDown className={`transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`} />
      </SelectTrigger>
      {isOpen && (
        <SelectContent>
          <SelectGroup>
            {options.map((option) => (
              <SelectItem
                key={option.value}
                onClick={() => {
                  onChange(option.value)
                  setIsOpen(false)
                }}
              >
                {option.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      )}
    </div>
  )
}

export const SelectGroup = ({ children }: { children: React.ReactNode }) => <div className="p-1">{children}</div>

export const SelectTrigger = ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => (
  <div
    className="flex items-center justify-between w-full bg-green-600 bg-opacity-50 border border-green-400 text-white py-3 px-4 rounded cursor-pointer"
    onClick={onClick}
  >
    {children}
  </div>
)

export const SelectValue = ({ children }: { children: React.ReactNode }) => <span>{children}</span>

export const SelectContent = ({ children }: { children: React.ReactNode }) => (
  <div className="absolute z-10 w-full mt-1 bg-green-600 bg-opacity-50 border border-green-400 rounded shadow-lg overflow-auto max-h-48">
    {children}
  </div>
)

export const SelectItem = ({ children, onClick }: { children: React.ReactNode; onClick: () => void }) => (
  <div className="px-4 py-2 cursor-pointer hover:bg-green-500 text-white" onClick={onClick}>
    {children}
  </div>
)

export const SelectLabel = ({ children }: { children: React.ReactNode }) => (
  <div className="px-4 py-2 text-white">{children}</div>
)

export const SelectSeparator = () => <div className="border-b border-green-400" />

export const SelectScrollUpButton = () => <div>Scroll Up</div>

export const SelectScrollDownButton = () => <div>Scroll Down</div>

